<script> {% include "./js/jquery.dataTables.min.js" %} </script>
<script> {% include "./js/dataTables.jqueryui.min.js" %} </script>

<script> {% include "./js/jszip.min.js" %} </script>
<script> {% include "./js/dataTables.buttons.min.js" %} </script>
<script> {% include "./js/buttons.flash.min.js" %} </script>
<script> {% include "./js/buttons.html5.min.js" %} </script>
<script> {% include "./js/buttons.print.min.js" %} </script>

<style> {% include "./css/jquery-ui.css" %}</style>
<style> {% include "./css/dataTables.jqueryui.min.css" %}</style>
<style> {% include "./css/buttons.dataTables.min.css" %}</style>

<script>
    $(document).ready(function () {
        var table_id = {{table_dict['id']|safe}};
        var table = $(table_id).DataTable({
            dom: 'Bfrtip',
            buttons: ['excel']
        });
        table.columns(-1).order('desc').draw();
    });
</script>

<div class="abc" style="float: left; margin-left: 15%; margin-right:15%; width: 70%" >
    <h2>{{ table_dict['title'] }}    <i class="fa fa-question-circle" onClick="toggle1(this)" style="cursor:pointer;"></i> </h2>
    <div class="box1">
      <div class="description" style="display: none;">
        <p>Clonotypes ranked by frequency. For the full table, please refer to the "*clonotypes.tsv" file produced by the pipeline.</p>
      </div>
      <div style=" margin-left: 3%; margin-right:3%;">
          {{table_dict['table'] | safe}}
      </div>

      <div class="clear" ></div>
    </div>
  </div>